<template>
    <el-select v-model="gatewayId"
               size="small"
               placeholder="请选择网关"
               @change="changeGatewayNumber"
               clearable
    >
        <el-option
                v-for="item in gatewayList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
        >
            <span style="float: left; font-size: 13px">{{ item.label }}</span>
            <span style="float: left; margin-left: 5px">
        <svg-icon v-if="item.serverOnline === '0'" icon-class="wifi-offline"
                  style="width: 1.5em; height: 1.5em; color: #333333"
        />
        <svg-icon v-if="item.serverOnline === '1'" icon-class="wifi-online"
                  style="width: 1.5em; height: 1.5em; color: #1afa29"
        />
      </span>
        </el-option>
    </el-select>
</template>

<script>
import { listSelect } from '@/api/equipment/gateway'

export default {
    name: 'gatewaySelect',
    data() {
        return {
            gatewayId: null,
            // 用于筛选
            gatewayList: [],
            // 用于修改
            gatewayListOption: []
        }
    },
    created() {
        this.getGatewayList()
    },
    methods: {

        getGatewayList() {

            listSelect().then(response => {

                this.gatewayList = []
                this.gatewayListOption = []

                for (let item of response.data) {
                    let temp = {}
                    temp['value'] = item.gatewayId
                    temp['label'] = item.gatewayName
                    temp['serverOnline'] = item.serverOnline
                    this.gatewayList.push(temp)
                    this.gatewayListOption.push(temp)
                }


                let obj = {
                    'gatewayId': this.gatewayId,
                    'gatewayListOption': this.gatewayListOption
                }

                this.$emit('changeGateway', obj)

            })
        },

        changeGatewayNumber(newValue) {
            let obj = {
                'gatewayId': newValue,
                'gatewayListOption': this.gatewayListOption
            }
            this.$emit('changeGateway', obj)
        }
    }
}
</script>

<style lang="scss"></style>
